<template>
  <!-- 使用 Vant 的 CellGroup 组件来包裹待办事项列表 -->
  <van-cell-group>
    <van-cell
      v-for="item in list"
      :key="item.id"
      :title="item.name"
      :style="{ textDecoration: item.done? 'line-through' : 'none', color: item.done? '#949494' : '' }"
      :is-link="false"
    >
      <!-- 使用 Vant 的 Checkbox 组件来替代原有的自定义勾选框 -->
      <template #left-icon>
        <van-checkbox v-model="item.done" @change="checkDone(item)" />
      </template>
      <!-- 使用 Vant 的 Icon 组件来替代原有的删除按钮 -->
      <template #right-icon>
        <van-icon name="delete" @click="delTodo(item.id)" />
      </template>
    </van-cell>
  </van-cell-group>
</template>

<script>
export default {
  props: {
    list: {
      type: Array
    }
  },
  methods: {
    checkDone(item) {
      item.done = !item.done;
    },
    delTodo(id) {
      this.$emit('delTodo', id);
    }
  }
};
</script>

<style scoped>
/* 可以根据需要对 Vant 组件的样式进行微调 */
.van-cell {
  border-bottom: 1px solid #ededed;
}
</style>